// 消费者列表组件
const ConsumersList = {
    template: `
        <div>
            <div class="table-container">
                <div class="table-header">
                    <div class="table-title">
                        <i class="fas fa-users"></i> 消费者列表
                    </div>
                    <div>
                        <el-input
                            placeholder="搜索消费者..."
                            v-model="searchQuery"
                            prefix-icon="el-icon-search"
                            clearable
                            style="width: 250px; margin-right: 10px;">
                        </el-input>
                        <router-link to="/consumers/create">
                            <el-button type="primary" icon="el-icon-plus">创建消费者</el-button>
                        </router-link>
                    </div>
                </div>
                
                <el-table
                    :data="filteredConsumers"
                    v-loading="loading"
                    border
                    style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="appId" label="应用ID" width="150"></el-table-column>
                    <el-table-column prop="appName" label="应用名称" width="200"></el-table-column>
                    <el-table-column prop="description" label="描述"></el-table-column>
                    <el-table-column prop="createdAt" label="创建时间" width="180">
                        <template slot-scope="scope">
                            {{ formatDate(scope.row.createdAt) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="viewConsumer(scope.row)">
                                查看
                            </el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                @click="editConsumer(scope.row)">
                                编辑
                            </el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="deleteConsumer(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <div class="pagination-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="filteredConsumers.length">
                    </el-pagination>
                </div>
            </div>
            
            <!-- 消费者详情对话框 -->
            <el-dialog title="消费者详情" :visible.sync="dialogVisible" width="60%">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="ID">{{ currentConsumer.id }}</el-descriptions-item>
                    <el-descriptions-item label="应用ID">{{ currentConsumer.appId }}</el-descriptions-item>
                    <el-descriptions-item label="应用名称">{{ currentConsumer.appName }}</el-descriptions-item>
                    <el-descriptions-item label="应用密钥">{{ currentConsumer.appSecret }}</el-descriptions-item>
                    <el-descriptions-item label="描述">{{ currentConsumer.description }}</el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{ formatDate(currentConsumer.createdAt) }}</el-descriptions-item>
                    <el-descriptions-item label="更新时间">{{ formatDate(currentConsumer.updatedAt) }}</el-descriptions-item>
                </el-descriptions>
                
                <el-tabs v-model="activeTab" style="margin-top: 20px;">
                    <el-tab-pane label="RSA公钥" name="public">
                        <el-input
                            type="textarea"
                            :rows="8"
                            readonly
                            v-model="currentConsumer.rsaPublicKey">
                        </el-input>
                        <el-button 
                            size="small" 
                            type="primary" 
                            icon="el-icon-copy-document" 
                            style="margin-top: 10px;"
                            @click="copyToClipboard(currentConsumer.rsaPublicKey)">
                            复制公钥
                        </el-button>
                    </el-tab-pane>
                    <el-tab-pane label="RSA私钥" name="private">
                        <el-input
                            type="textarea"
                            :rows="8"
                            readonly
                            v-model="currentConsumer.rsaPrivateKey">
                        </el-input>
                        <el-button 
                            size="small" 
                            type="warning" 
                            icon="el-icon-copy-document" 
                            style="margin-top: 10px;"
                            @click="copyToClipboard(currentConsumer.rsaPrivateKey)">
                            复制私钥
                        </el-button>
                    </el-tab-pane>
                </el-tabs>
                
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="getToken(currentConsumer)">获取令牌</el-button>
                </span>
            </el-dialog>
            
            <!-- 删除确认对话框 -->
            <el-dialog
                title="确认删除"
                :visible.sync="deleteDialogVisible"
                width="30%">
                <p>确定要删除消费者 "{{ currentConsumer.appName || currentConsumer.appId }}" 吗？此操作不可恢复。</p>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="confirmDelete" :loading="deleting">确定</el-button>
                </span>
            </el-dialog>
        </div>
    `,
    data() {
        return {
            consumers: [],
            loading: true,
            searchQuery: '',
            currentPage: 1,
            pageSize: 10,
            dialogVisible: false,
            deleteDialogVisible: false,
            deleting: false,
            currentConsumer: {},
            activeTab: 'public'
        };
    },
    computed: {
        filteredConsumers() {
            if (!this.searchQuery) {
                return this.consumers;
            }
            
            const query = this.searchQuery.toLowerCase();
            return this.consumers.filter(consumer => {
                return consumer.appId.toLowerCase().includes(query) ||
                    (consumer.appName && consumer.appName.toLowerCase().includes(query)) ||
                    (consumer.description && consumer.description.toLowerCase().includes(query));
            });
        }
    },
    created() {
        this.fetchConsumers();
    },
    methods: {
        fetchConsumers() {
            this.loading = true;
            axios.get('/consumers')
                .then(response => {
                    this.consumers = response.data;
                })
                .catch(error => {
                    console.error('获取消费者列表失败:', error);
                    this.$message.error('获取消费者列表失败: ' + (error.response?.data?.error || error.message));
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        viewConsumer(consumer) {
            this.currentConsumer = {...consumer};
            this.dialogVisible = true;
        },
        editConsumer(consumer) {
            this.$router.push(`/consumers/edit/${consumer.id}`);
        },
        deleteConsumer(consumer) {
            this.currentConsumer = consumer;
            this.deleteDialogVisible = true;
        },
        confirmDelete() {
            this.deleting = true;
            
            axios.delete(`/consumers/${this.currentConsumer.id}`)
                .then(() => {
                    this.$message.success('消费者删除成功');
                    this.deleteDialogVisible = false;
                    this.fetchConsumers();
                })
                .catch(error => {
                    this.$message.error('删除消费者失败: ' + (error.response?.data?.error || error.message));
                })
                .finally(() => {
                    this.deleting = false;
                });
        },
        getToken(consumer) {
            this.$router.push({
                path: '/token',
                query: { appId: consumer.appId }
            });
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return date.toLocaleString();
        },
        copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            this.$message({
                message: '已复制到剪贴板',
                type: 'success'
            });
        }
    }
}; 